<template>
	<view class="guess-box" v-if="shopList.length > 0">
	111
		<view class="title-box">
			<text class="title">{{ homeData && homeData.index_guess_like_title ? homeData.index_guess_like_title : '周边店铺'}}</text>
			<text class="desc">{{ homeData && homeData.index_guess_like_desc ? homeData.index_guess_like_desc : ''}}</text>
		</view>
		<view class="list-wrapper">
			<view class="list-item" v-for="(item, index) in shopList" :key="index">
				<view v-if="item.re_type == 'store'" class="shop-item border-b">
					<view class="shop-img">
						<image :src="item.pic" mode="aspectFill" :lazy-load="true"></image>
						<block v-if="item.is_brand == 1">
							<lang class="img-tip" keywords="品牌甄选"></lang>
						</block>
					</view>
					<view class="info-box">
						<view class="name-box">
							<text class="name">{{item.store_name}}</text>
							<view class="store-tag" v-if="item.business_label.length > 0">
								<text class="group-tip" v-if="item.business_label[0] != ''">{{item.business_label[0]}}</text>
								<text class="food-tip" v-if="item.business_label[1] != ''">{{item.business_label[1]}}</text>
								<text class="appoint-tip" v-if="item.business_label[2] != ''">{{item.business_label[2]}}</text>
							</view>
						</view>
						<view class="small desc">
							<text class="iconfont icon-star"></text>
							<text class="score">{{item.star}}</text>
						</view>
						<view class="small desc orange bottom">{{item.tip}}</view>
					</view>
					<form :report-submit="true" class="formidForm" @submit="goUrl($event)" :data-url="item.url" data-url_title="店铺主页">
						<button formType="submit" class="formidBtn"></button>
					</form>
				</view>
				<view v-if="item.re_type == 'shop'" class="shop-item border-b">
					<view class="shop-img">
						<image :src="item.pic" mode="aspectFill" :lazy-load="true"></image>
						<block v-if="item.is_brand == 1">
							<lang class="img-tip" keywords="品牌甄选"></lang>
						</block>
					</view>
					<view class="info-box">
						<view class="name-box">
							<text class="name">{{item.store_name}}</text>
							<!-- <text class='icon'>外卖</text> -->
							<text class="small mt5 distance">{{item.range}}</text>
						</view>
						<view class="small desc">
							<text class="iconfont icon-star"></text>
							<text class="score">{{item.star}}</text>
							<lang keywords="月售" :right="true"></lang>{{item.sale_count}}
						</view>
						<view class="rel flex flex-center mb5" v-if="item.deliver_time !== ''">
							<view class="small inline">
								<lang keywords="起送价" :right="true"></lang>
								<text>{{currency + item.price_1}}</text>
							</view>
							<block v-if="config.config.shop_show_delivermoney">
								<text class="iconfont icon-line"></text>
								<view class="small inline">
									<lang keywords="配送费" :right="true"></lang>
									{{currency + item.price_2}}
								</view>
							</block>

							<!-- <view class='small right inline'>{{item.deliver_time}}<lang keywords='送达' left='{{true}}'/></view> -->
						</view>
						<view class="discount-icon">
							<view :class="icon.type" v-for="(icon, index2) in item.info_arr" :key="index2">{{icon.text}}</view>
						</view>
					</view>
					<form :report-submit="true" class="formidForm" @submit="goUrl($event)" :data-url="item.url" :data-url_title="item.store_name">
						<button formType="submit" class="formidBtn"></button>
					</form>
				</view>
				<view v-if="item.re_type == 'meal'" class="shop-item border-b">
					<view class="shop-img">
						<image :src="item.pic" mode="aspectFill" :lazy-load="true"></image>
						<block v-if="item.is_brand == 1">
							<lang class="img-tip" keywords="品牌甄选"></lang>
						</block>
					</view>
					<view class="info-box">
						<view class="name-box">
							<view class="name">{{item.store_name}}
								<!-- <text class='food-icon'>点餐</text> -->
							</view>
							<text class="small mt5 distance">{{item.range}}</text>
						</view>
						<view class="small desc">
							<text class="iconfont icon-star"></text>
							<text class="score">{{item.star}}</text>
						</view>
						<view class="rel flex flex-center flex-wrap">
							<text class="small bg" v-for="(label, index2) in item.business_label" :key="index2">{{label}}</text>
						</view>
						<view class="small desc orange">{{item.tip}}</view>
					</view>
					<form :report-submit="true" class="formidForm" @submit="goUrl($event)" :data-url="item.url" :data-url_title="item.store_name">
						<button formType="submit" class="formidBtn"></button>
					</form>
				</view>
				<view v-if="item.re_type && item.re_type == 'hotel'" class="shop-item border-b">
					<view class="shop-img">
						<image :src="item.pic" mode="aspectFill" :lazy-load="true"></image>
						<block v-if="item.is_brand == 1">
							<lang class="img-tip" keywords="品牌甄选"></lang>
						</block>
					</view>
					<view class="info-box">
						<view class="name-box">
							<view class="name">{{item.store_name}}
								<!-- <text class='food-icon'>酒店</text> -->
							</view>
							<text class="small mt5 distance">{{item.range}}</text>
						</view>
						<view class="rel flex flex-center">
							<text class="iconfont icon-star"></text>
							<text class="score">{{item.star}}</text>
							<lang class="small" keywords="X1人消费" :X1="item.sale_count + '+'"></lang>
						</view>
						<view class="rel flex flex-center mb2">
							<text class="small">{{item.address}}</text>
							<view class="small right">
								<text class="green" v-for="(label, index2) in item.label" :key="index2">{{label}}</text>
							</view>
						</view>
						<view class="rel flex price-box">
							<text class="small red bold">{{currency}}</text>
							<text class="red now-price">{{item.price}}</text>
							<block v-if="item.price_up == 1">
								<lang class="small" keywords="起"></lang>
							</block>
							<text class="small right mt5 orange">{{item.tip}}</text>
						</view>
					</view>
					<form :report-submit="true" class="formidForm" @submit="goUrl($event)" :data-url="item.url" :data-url_title="item.store_name">
						<button formType="submit" class="formidBtn"></button>
					</form>
				</view>
				<view v-if="item.re_type && item.re_type == 'group'" class="shop-item border-b">
					<view class="shop-img">
						<image :src="item.pic" mode="aspectFill" :lazy-load="true"></image>
						<block v-if="item.is_brand == 1">
							<lang class="img-tip" keywords="品牌甄选"></lang>
						</block>
					</view>
					<view class="info-box group">
						<view class="name-box">
							<view class="name">
								<text class="mr5">{{item.store_name}}</text>
								<block v-if="item.discount">
									<lang class="food-icon" keywords="超值"></lang>
								</block>
							</view>
							<text class="small mt5 distance">{{item.range}}</text>
						</view>
						<view class="small desc">{{item.name}}</view>
						<view class="rel flex flex-center mb5 price-box">
							<text class="small red bold">{{currency}}</text>
							<text class="red now-price">{{item.price}}</text>
							<view class="small gray old-price inline">
								<lang keywords="门市价"></lang>:{{currency + item.old_price}}
							</view>
							<view class="small right mt5 inline">
								<lang keywords="月售" :right="true"></lang>{{item.sale_count}}
							</view>
						</view>
						<view class="discount-icon" v-if="item.info != ''">
							<text class="icon">{{item.info}}</text>
						</view>
					</view>
					<form :report-submit="true" class="formidForm" @submit="goUrl($event)" :data-url="item.url" :data-url_title="item.store_name">
						<button formType="submit" class="formidBtn"></button>
					</form>
				</view>
				<view v-if="item.re_type == 'pin_group'" class="shop-item border-b">
					<view class="shop-img">
						<image :src="item.pic" mode="aspectFill" :lazy-load="true"></image>
						<block v-if="item.is_brand == 1">
							<lang class="img-tip" keywords="品牌甄选"></lang>
						</block>
					</view>
					<view class="info-box group">
						<view class="name-box">
							<view class="name">
								<text class="mr5">{{item.store_name}}</text>
								<lang class="food-icon" keywords="拼团"></lang>
							</view>
							<text class="small mt5 distance">{{item.range}}</text>
						</view>
						<view class="small desc">{{item.name}}</view>
						<view class="rel flex flex-center price-box mb2">
							<text class="small red bold">{{currency}}</text>
							<text class="red now-price">{{item.price}}</text>
							<view class="small gray old-price inline">
								<lang keywords="门市价"></lang>:{{currency + item.old_price}}
							</view>
							<!-- <text class='small right mt5'>月售{{item.sale_count}}</text> -->
						</view>
						<view class="news">
							<swiper class="news-swiper" vertical="true" autoplay="true" circular="true" interval="8000">
								<swiper-item class="flex">
									<!-- <text class='desc red'>已拼{{item.sale_count}}件</text> -->
									<lang class="desc red" keywords="已拼X1件" :X1="item.sale_count"></lang>
								</swiper-item>
								<swiper-item class="flex">
									<lang class="desc red" keywords="X1人正在拼团" :X1="item.sale_person"></lang>
								</swiper-item>
							</swiper>
							<view class="news-mask"></view>
						</view>
					</view>
					<form :report-submit="true" class="formidForm" @submit="goUrl($event)" :data-url="item.url" :data-url_title="item.store_name">
						<button formType="submit" class="formidBtn"></button>
					</form>
				</view>

			</view>
			<view class="loading-tip" v-show="pageLoading">
				<lang keywords="加载中"></lang>
			</view>
			<view class="loading-tip" v-show="pageComplete">
				<lang keywords="没有更多数据了"></lang>
			</view>
		</view>
	</view>
</template>

<script>
	var common = require('../../utils/common.js');
	var _this;

	// 获取猜你喜欢列表
	const getShopList = () => {
		common.post('Home&a=plat_recommend', {
			lat: _this.lat,
			lng: _this.lng,
			page: _this.page,
			noTip: true
		}, data => {
			if (_this.page == 1) {
				_this.shopList = [];
				_this.pageLoading = false
				_this.pageComplete = false
			}

			if (data.list.length > 0) {
				data.list = data.list.map(item => {
					if (item.business_label != "") {
						var arr = [];
						if (item.re_type == 'store') {
							arr[0] = item.business_label.indexOf('团') != -1 ? common.changeTxt('团') : '';
							arr[1] = item.business_label.indexOf('餐') != -1 ? common.changeTxt('餐') : '';
							arr[2] = item.business_label.indexOf('外') != -1 ? common.changeTxt('外') : '';
						} else {
							arr = item.business_label.split(',');
						}

						item.business_label = arr;
					} else {
						item.business_label = [];
					}

					if (item.label != '') {
						item.label = item.label.split(',');
					} else {
						item.label = [];
					}

					if (item.re_type == 'group') {
						// 5折以下显示超值标签
						item.discount = (item.price / item.old_price).toFixed(2);
						item.discount = item.discount * 100;
						console.log('66666666666666666666', item.store_name, item.discount);
						item.discount = item.discount > 0 && item.discount <= 50 || item.price == 0 && item.old_price > 0 ? true :
							false;
					}

					return item;
				});
				_this.shopList = _this.shopList.concat(data.list)
				if (data.list.length < 10 || _this.page == 10) {
					_this.pageLoading = false
					_this.pageComplete = true
				} else if (_this.page < 10) {
					_this.pageLoading = true
					_this.page = _this.page + 1
				}
			}
		});
	};

	export default {
		name: 'GuessUserLike',
		props: {
			// 猜你喜欢的词
			homeData: {
				type: Object,
				default: {}
			},
			config: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				shopList: [],
				pageLoading: true,
				pageComplete: false,
				page: 1,
				lng: 0,
				lat: 0,
				currency: '¥'
			}
		},
		watch: {

		},
		created() {
			_this = this;
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					common.changeLocation('getLocation_msg', _this, res.longitude, res.latitude, 'gcj02');
				},
				fail: function(res) {
					console.log('定位失败：', res);
				}
			});
			// common.changeCurrency(this)
		},
		methods: {
			goUrl(e) {
				this.$emit('goUrl', e)
			},
			getLocation_msg(res) {
				console.log('反馈信息：', res);
				if (res && res.lng && res.lat) {
					_this.lng = res.lng;
					_this.lat = res.lat;
				}
				getShopList();
			},
		}
	}
</script>
<style lang="scss" scoped>
	.guess-box {
		background-color: white;
		margin-top: 20rpx;
		padding-top: 20rpx;
	}

	.title-box {
		display: flex;
		margin: 0 20rpx 0;
		align-items: center;
		position: relative;
		font-size: 12px;
	}

	.title-box .title {
		font-size: 18px;
		font-weight: 500;
		margin-right: 5px;
		vertical-align: top
	}

	.title-box .desc {
		color: #bbb;
		align-self: flex-end;
	}

	.title-box .day-box {
		display: inline-block;
	}

	.title-box .time {
		font-size: 12px;
		width: 18px;
		height: 18px;
		background: #333;
		color: #fff;
		display: inline-block;
		text-align: center;
		line-height: 18px;
		margin: 2px 4px 0;
		border-radius: 2px;
	}

	.title-box .more {
		font-size: 12px;
		color: #999;
		position: absolute;
		top: 2px;
		right: -10rpx
	}

	.title-box .more .iconfont {
		font-size: 24px;
		vertical-align: middle;
		margin-left: -5px;
	}

	.goods-box {
		margin-left: 20rpx;
	}

	.goods-item {
		width: calc(33.333% - 20rpx);
		margin-top: 20rpx;
		margin-right: 20rpx;
		overflow: hidden;
		position: relative;
	}

	.brand-box .goods-item:nth-child(2) {
		margin-right: 0;
	}

	.goods-item:last-child {
		margin-right: 0;
	}

	.goods-item .img-box {
		position: relative;
	}

	.goods-item .img-box .icon {
		position: absolute;
		bottom: 0;
		left: 0;
		background: linear-gradient(to right, #ffb269, #ff4437);
		color: #fff;
		border-radius: 0 10px 0 0;
		font-size: 11px;
		padding: 1px 5px;
	}

	.goods-item image {
		width: 100%;
		height: 111.66px;
		border-radius: 2px;
		display: block;
	}

	.goods-item .name,
	.goods-item .desc {
		font-size: 14px;
		font-weight: 500;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 100%;
		overflow: hidden;
		margin-top: 2px;
	}

	.goods-item .desc {
		font-size: 12px;
		font-weight: 400;
	}

	.goods-item .price-box {
		color: red;
		font-size: 14px;
		margin-top: 2px;
	}

	.goods-item .old-price {
		color: #999;
		margin-left: 5px;
		text-decoration: line-through;
		font-size: 12px;
	}

	.brand-box {
		margin-left: 20rpx;
		flex-wrap: wrap;
	}

	.brand-img {
		width: calc(66.66% - 20rpx);
		margin-top: 20rpx;
		margin-right: 20rpx;
	}

	.brand-img image {
		width: 100%;
		height: 176.66px;
		display: block;
	}

	.shop-item {
		padding: 20rpx;
		display: flex;
		position: relative;
		width: 100%;
		box-sizing: border-box;
	}

	.shop-item.border-b::after {
		left: 20rpx;
	}

	.list-wrapper .list-item:last-child .shop-item.border-b:last-child::after {
		height: 0;
	}

	.shop-item .shop-img {
		width: 102px;
		height: 72px;
		border-radius: 5px;
		flex-shrink: 0;
		margin-right: 20rpx;
		overflow: hidden;
		position: relative;
	}

	.shop-item .shop-img image {
		width: 100%;
		height: 100%;
	}

	.shop-item .info-box {
		position: relative;
		width: calc(100% - 102px - 20rpx);
		min-height: 80px;
	}

	.shop-item .small {
		color: #333;
		font-size: 12px;
	}

	.shop-item .small.bg {
		background: #f4f4f4;
		margin-right: 5px;
		margin-bottom: 5px;
		padding: 0 20rpx;
	}

	.shop-item .name-box {
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	.shop-item .name-box.food {
		justify-content: flex-start;
	}

	.shop-item .name-box.food .icon {
		margin-left: 5px;
		font-size: 12px;
		border-radius: 3px;
		align-self: center;
		color: #fff;
		height: 20px;
		line-height: 20px;
		padding: 0 5px;
		background: linear-gradient(to right, #facd7a, #faa300);
	}

	.shop-item .name {
		font-size: 16px;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.shop-item .distance {
		white-space: nowrap
	}

	.shop-item .info-box.group .name {
		overflow: static;
		flex-grow: 1;
		height: 25px;
	}

	.shop-item .info-box.group .name .mr5 {
		max-width: calc(100% - 60px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
	}

	.shop-item .info-box.group .name .food-icon {
		position: relative;
		top: -4px;
		margin-left: 0;
	}

	.shop-item .gray {
		color: #bbb;
	}

	.shop-item .red {
		color: #f6503e;
	}

	.shop-item .orange {
		color: #f17019;
		font-weight: bold;
	}

	.shop-item .green {
		color: #06c1ae;
		border: 1px solid #06c1ae;
		margin-left: 5px;
		font-size: 11px;
		padding: 1px 3px;
		border-radius: 2px;
	}

	.shop-item .bold {
		font-weight: bold;
	}

	.shop-item .right {
		position: absolute;
		right: 0;
	}

	.shop-item .bottom {
		position: absolute;
		bottom: 0;
	}

	.shop-item .desc {
		margin-bottom: 3px;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.shop-item .price-box {
		line-height: 1;
		align-items: baseline;
	}

	.shop-item .now-price {
		margin-right: 5px;
		font-size: 18px;
		font-weight: 500;
	}

	.shop-item .discount-icon {
		display: flex;
		flex-wrap: wrap;
	}

	.shop-item .discount-icon .icon {
		margin-right: 5px;
		margin-bottom: 5px;
		font-size: 11px;
		padding: 0 3px;
		border-radius: 2px;
		color: #ce847f;
		border: 1rpx solid #f4cfcc;
		background: #fff4f2;
	}

	.shop-item .store-tag {
		height: 20px;
		white-space: nowrap;
	}

	.shop-item .store-tag text {
		display: inline-block;
		width: 20px;
		height: 100%;
		background: pink;
		font-size: 14px;
		vertical-align: top;
		color: #fff;
		margin-left: 5px;
		text-align: center;
		line-height: 20px;
	}

	.shop-item .store-tag text.group-tip {
		background: #74da1c;
	}

	.shop-item .store-tag text.food-tip {
		background: #fc5e03;
	}

	.shop-item .store-tag text.appoint-tip {
		background: #f8c717;
	}

	.shop-item .img-tip {
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		padding: 0 5px;
		font-size: 12px;
		background: linear-gradient(to right, rgb(247, 105, 57), rgb(255, 60, 0));
		border-radius: 0 10px 0 5px;
	}

	.shop-item .icon-star {
		color: #ffc900;
		font-size: 12px;
		margin-right: 5px;
	}

	.shop-item .name-box .food-icon {
		background: linear-gradient(to right, rgb(243, 137, 101), rgb(255, 60, 0));
		color: #fff;
		font-size: 12px;
		height: 20px;
		line-height: 20px;
		padding: 0 5px;
		margin-left: 5px;
		border-radius: 3px;
		display: inline-block;
	}

	.shop-item .score {
		margin-right: 10px;
		font-size: 12px;
	}

	.shop-item .sale-tip {
		background: linear-gradient(to right, rgb(247, 105, 57), rgb(255, 60, 0));
		color: #fff;
		font-size: 12px;
		margin-right: 5px;
		padding: 2px 5px;
		border-radius: 2px;
	}

	.shop-item .news,
	.shop-item .news .news-swiper {
		margin: 0;
		font-size: 12px;
		height: 20px !important;
	}

	.loading-tip {
		text-align: center;
		line-height: 30px;
		color: #999;
		font-size: 14px;
		margin-top: 20px;
	}

	/* 发票 */
	.invoice {
		color: #06c1ae;
		border: 1rpx solid #c5f3ef;
	}

	/* 平台首单优惠 平台优惠 */
	.system_newuser,
	.system_minus {
		color: #aa8023;
		border: 1rpx solid #f3e5c6;
	}

	/* 打折 部分商品限时优惠  部分商品分类折扣优惠 配送费优惠 店铺首单优惠 店铺优惠 */
	.discount,
	.isdiscountgoods,
	.isdiscountsort,
	.delivery,
	.newuser,
	.minus {
		color: #ff3e4a;
		border: 1rpx solid #fce5e7;
	}

	.discount-icon>view {
		margin-right: 5px;
		margin-bottom: 5px;
		font-size: 11px;
		padding: 0 3px;
		border-radius: 2px;
	}
</style>
